<template>
  <dev>
    <h1 class="page-header">Dashboard</h1>

    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th v-for="headColumn in headColumns">{{ headColumn.label }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="rowData in rowDatas">
            <td v-for="headColumn in headColumns"><span v-html="rowData[headColumn.field]"></span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <pagination v-bind:pageSize="pageSize" v-bind:total="total" v-bind:currentPageNum="currentPageNum"
                v-bind:pageNumShow="pageNumShow" v-bind:pageSizeList="pageSizeList" v-on:page="pageData"></pagination>
  </dev>
</template>

<script>
  import pagination from '@/components/Pagination'

  export default {
    name: 'table-view',
    props: ['headColumns', 'rowDatas', 'total', 'pageSize', 'currentPageNum', 'pageNumShow', 'pageSizeList'],
    components: {
      "pagination": pagination
    },
    methods:{
      pageData:function(pageNum, pageSize){
        this.$emit('loadData', pageNum, pageSize);
      }
    }
  }
</script>
